<!DOCTYPE html>
<html><head>
		<title>jsPlumb 1.3.3 demo - jQuery</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="demo_files/mp.htm">
		<link rel="stylesheet" href="demo_files/jsPlumbDemo.css">
		<link rel="stylesheet" href="demo_files/demo.css">				
	</head>
	<body onunload="jsPlumb.unload();">
	
		<div class="menu"><a href="http://jsplumb.org/doc/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="http://jsplumb.org/apidocs">view api docs</a>&nbsp;|&nbsp;<a href="http://jsplumb.org/tests/1.3.3/qunit-all.html">qunit tests</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
	
		<div style="position:absolute">
		<div id="demo">
			<div class="component window ui-draggable" id="window1"><strong>Window 1</strong><br><br>i am plumbed with a yellow Bezier connector to Window 2.</div>
			<div class="component window ui-draggable" id="window2"><strong>Window 2</strong><br><br>i am plumbed with a yellow Bezier connector to Window 1, and a Bezier connector with square endpoints to Window 3</div>
		    <div class="component window ui-draggable" id="window3"><strong>Window 3</strong><br><br>i
 am plumbed with a Bezier connector and square endpoints to Window 2, 
and a Bezier connector with custom style to Window 4. My blue endpoint 
tracks Window 4.</div>
		    <div class="component window ui-draggable" id="window4"><strong>Window 4</strong><br><br>i
 am plumbed with a Bezier connector with custom style to Window 3, and 
with a straight line connector with image endpoints to Window 5. My blue
 endpoint tracks Window 3.</div>
		    <div class="component window ui-draggable" id="window5"><strong>Window 5</strong><br><br>i
 am plumbed with a flowchart connector to Window 6, between our two 
centerpoints, which are drawn below, and larger than, the window 
element; i am also plumbed to Window 4.</div>
		    <div class="component window ui-draggable" id="window6"><strong>Window 6</strong><br><br>i
 am plumbed with a flowchart connector to Window 5, between our two 
centerpoints, which are drawn below, and larger than, the window 
element.</div>
		 <canvas width="20" height="20" id="jsPlumb_1324486310499" class="_jsPlumb_endpoint " style="position: absolute; height: 20px; width: 20px; left: 101.533px; top: 167.033px;"></canvas><canvas width="20" height="20" id="jsPlumb_1324486310500" class="_jsPlumb_endpoint " style="position: absolute; height: 20px; width: 20px; left: 664.033px; top: 151.233px;"></canvas><canvas width="582" height="315" id="jsPlumb_1324486310501" class="_jsPlumb_connector c1" style="position: absolute; height: 315.8px; width: 582.5px; left: 101.533px; top: 11.2333px;"></canvas><div id="jsPlumb_1324486310503" class="_jsPlumb_overlay l1 component label" style="position: absolute; font: 12px sans-serif; color: black; left: 516.053px; top: 102.846px;">Connection One</div><canvas width="20" height="20" id="jsPlumb_1324486310535" class="_jsPlumb_endpoint " style="position: absolute; height: 20px; width: 20px; left: 584.383px; top: 305.233px;"></canvas><canvas width="20" height="20" id="jsPlumb_1324486310537" class="_jsPlumb_endpoint " style="position: absolute; height: 20px; width: 20px; left: 101.533px; top: 312.467px;"></canvas><canvas width="502" height="292" id="jsPlumb_1324486310544" class="_jsPlumb_connector " style="position: absolute; height: 292.767px; width: 502.85px; left: 101.533px; top: 172.467px;"></canvas><canvas width="70" height="70" id="jsPlumb_1324486310588" class="_jsPlumb_endpoint " style="position: absolute; height: 70px; width: 70px; left: 165.033px; top: 364.467px;"></canvas><canvas width="70" height="70" id="jsPlumb_1324486310590" class="_jsPlumb_endpoint " style="position: absolute; height: 70px; width: 70px; left: 264.433px; top: 111.1px;"></canvas><canvas width="200" height="263" id="jsPlumb_1324486310592" class="_jsPlumb_connector " style="position: absolute; height: 263.367px; width: 200.6px; left: 149.433px; top: 141.1px;"></canvas><div id="jsPlumb_1324486310593" class="_jsPlumb_overlay component label" style="position: absolute; font: 12px sans-serif; color: black; left: 204.733px; top: 256.283px;">16:51:50.722</div><canvas width="190" height="190" id="jsPlumb_1324486310665" class="_jsPlumb_endpoint " style="position: absolute; height: 190px; width: 190px; left: 362.033px; top: 442.667px;"></canvas><canvas width="190" height="190" id="jsPlumb_1324486310668" class="_jsPlumb_endpoint " style="position: absolute; height: 190px; width: 190px; left: 788.15px; top: 269.917px;"></canvas><canvas width="555" height="301" id="jsPlumb_1324486310669" class="_jsPlumb_connector " style="position: absolute; height: 301.75px; width: 555.117px; left: 392.533px; top: 300.417px;"></canvas><div id="jsPlumb_1324486310669" class="_jsPlumb_overlay component label" style="position: absolute; font: 12px sans-serif; color: black; left: 634.092px; top: 427.292px;">big
endpoints</div><img src="demo_files/endpointTest1.png" class="_jsPlumb_endpoint" style="margin: 0pt; padding: 0pt; outline: 0pt none; position: absolute; height: 50px; width: 50px; left: 451.433px; top: 198.1px;" height="50" width="50"><img src="demo_files/endpointTest1.png" class="_jsPlumb_endpoint" style="margin: 0pt; padding: 0pt; outline: 0pt none; position: absolute; height: 50px; width: 50px; left: 343.533px; top: 435.667px;" height="50" width="50"><canvas width="205" height="451" id="jsPlumb_1324486310698" class="_jsPlumb_connector " style="position: absolute; height: 451.377px; width: 205.01px; left: 319.978px; top: 116.195px;"></canvas><div id="jsPlumb_1324486310699" class="_jsPlumb_overlay component label" style="position: absolute; font: 12px sans-serif; color: black; left: 432.063px; top: 262.87px;">4 - 5</div></div>	
		 </div>
	    
	    <div id="debug"></div>
	    
	    <div id="explanation">
	    	<p>jsPlumb provides a way to "plumb" elements of a UI together.  </p>
	    	<p>This demonstration uses jsPlumb 1.3.3, jQuery 1.6.0 and jQuery UI 1.8.13.</p>
	    	<a href="http://jsplumb.org/jquery/flowchartConnectorsDemo.html" class="mplink">next: flowchart connectors demonstration</a>
	    	<br><br>
	    	render mode:&nbsp;<a href="#" class="rmode" mode="svg">SVG</a>&nbsp;|&nbsp;<a href="#" class="rmode selected" mode="canvas">Canvas</a>&nbsp;|&nbsp;<a disabled="disabled" href="#" class="rmode" mode="vml">VML</a>
	    	<br><br>
	    	You also might like to check out <a class="mplink" href="http://tweetplumb.com/?q=#jquery" target="_blank">TweetPlumb</a>, a Twitter visualisation built with jsPlumb.
	    	<br><br>
	    	See a <a href="http://jsplumb.org/mootools/demo.html">MooTools version</a> of this demo.<br>
	    	See a <a href="http://jsplumb.org/yui3/demo.html">YUI3 version</a> of this demo.
	    </div>
	    
	    <script src="demo_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript" src="demo_files/jquery_002.js"></script>
		<script type="text/javascript" src="demo_files/jquery-ui.js"></script>
		<script type="text/javascript" src="demo_files/jquery.js"></script>
		
		<!--  demo code -->
		<script type="text/javascript" src="demo_files/demo.js"></script>
		
		<!--  demo helper code -->
		<script type="text/javascript" src="demo_files/demo-helper-jquery.js"></script>			

<!-- Start of StatCounter Code --> 
<script type="text/javascript"> 
var sc_project=6543403; 
var sc_invisible=1; 
var sc_security="b1f05c44"; 
</script> 
 
<script type="text/javascript" src="demo_files/counter.js"></script><noscript><div
class="statcounter"><a title="tumblr page counter"
href="http://statcounter.com/tumblr/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6543403/0/5a87615f/1/"  
alt="tumblr page counter" ></a></div></noscript> 
<!-- End of StatCounter Code --> 
 
 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-15400992-4']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script> 

	

</body></html>